<template>
  <div class="product-create">
    <h1>添加新商品</h1>
    
    <el-form 
      :model="form" 
      :rules="rules" 
      ref="formRef" 
      label-width="100px"
      label-position="top"
      class="product-form"
    >
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入商品名称" />
      </el-form-item>
      
      <el-form-item label="商品品牌" prop="brand">
        <el-input v-model="form.brand" placeholder="请输入商品品牌" />
      </el-form-item>
      
      <el-form-item label="上架日期" prop="addedTime">
        <el-date-picker 
          v-model="form.addedTime" 
          type="date" 
          placeholder="选择上架日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      
      <el-form-item label="商品价格" prop="price">
        <el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入商品价格" />
      </el-form-item>
      
      <el-form-item label="商品图片URL" prop="picPaths">
        <el-input v-model="form.picPaths" placeholder="请输入商品图片URL" />
        <div class="preview" v-if="form.picPaths">
          <img :src="form.picPaths" alt="商品预览" class="preview-image">
        </div>
      </el-form-item>
      
      <el-form-item label="商品描述" prop="desc">
        <el-input 
          v-model="form.desc" 
          type="textarea" 
          :rows="5" 
          placeholder="请输入商品详细描述"
        />
      </el-form-item>
      
      <el-form-item label="商品库存" prop="stock">
        <el-input-number v-model="form.stock" :min="0" placeholder="请输入商品库存数量" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="loading">
          提交
        </el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { movieApi } from '../../utils/api'  // 修改为 movieApi
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const router = useRouter()
const loading = ref(false)

const form = ref({
  title: '',
  brand: '',
  addedTime: '',
  price: 0,
  picPaths: '',
  desc: '',
  stock: 0,
  typeIndex: 2  // 根据api.js中的要求添加typeIndex
})

const rules = {
  title: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  brand: [
    { required: true, message: '请输入商品品牌', trigger: 'blur' }
  ],
  price: [
    { required: true, message: '请输入商品价格', trigger: 'blur' },
    { type: 'number', min: 0, message: '价格不能为负数', trigger: 'blur' }
  ],
  desc: [
    { required: true, message: '请输入商品描述', trigger: 'blur' },
    { min: 10, message: '至少输入 10 个字符', trigger: 'blur' }
  ],
  stock: [
    { required: true, message: '请输入商品库存', trigger: 'blur' },
    { type: 'number', min: 0, message: '库存不能为负数', trigger: 'blur' }
  ]
}

const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 格式化数据以符合API要求
        const formData = {
          ...form.value,
          addedTime: form.value.addedTime || new Date().toISOString().split('T')[0]
        }
        
        await movieApi.create(formData)
        ElMessage.success('商品添加成功')
        router.push('/movies')  // 修改为跳转到/movies
      } catch (error) {
        console.error('添加商品错误:', error)
        ElMessage.error(`商品添加失败: ${error.message || '未知错误'}`)
      } finally {
        loading.value = false
      }
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
  form.value = {
    title: '',
    brand: '',
    addedTime: '',
    price: 0,
    picPaths: '',
    desc: '',
    stock: 0,
    typeIndex: 2
  }
}
</script>

<style scoped>
.product-create {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--dark-bg);
}

.product-form {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.preview {
  margin-top: 10px;
}

.preview-image {
  max-width: 200px;
  max-height: 300px;
  border-radius: 4px;
  border: 1px solid #eee;
}

@media (max-width: 768px) {
  .product-form {
    padding: 20px;
  }
}
</style>